import React, { useEffect, useState } from 'react';
import { APILoader, Map, Marker, Polygon } from '@uiw/react-baidu-map';
import { MapPoint } from '../pouch/models/City';

export interface BikeMapProp {
	polygons?: Array<Array<MapPoint>>;
	dots?: Array<MapPoint>;
	center?: string | MapPoint;
}

export default function BikeMap(props: BikeMapProp) {
	const [polygons, setPolygons] = useState<JSX.Element[]>([]);
	const [dots, setDots] = useState<JSX.Element[]>([]);

	useEffect(() => {
		if (props.polygons) {
			setPolygons(props.polygons.map((it, index) => <Polygon key={index} path={it} enableClicking={false}
																  fillOpacity={0.1} />));
		}
	}, [props.polygons]);

	useEffect(() => {
		if (props.dots) {
			setDots(props.dots.map((it, index) => <Marker key={index} position={it}/>));
		}
	}, [props.dots]);

	return (
		<APILoader akay={'LUGDprgmonNtCqbllRnpGs9Cn7Z4b7H6'}>
			<Map center={props.center || '中国'} enableScrollWheelZoom={true} enableAutoResize={true}>
				{polygons}

				{dots}
			</Map>
		</APILoader>
	);
}
